<template>
  <div style="height: 100vh; margin: 0 10px">
    <h1 style="margin: 0; height: 60px; line-height: 60px">Canvas Demo</h1>
    <div style="display: flex; height: calc(100% - 60px)">
      <div
        class="link-container"
        style="width: 20%; background-color: #fafafa; overflow: auto"
      >
        <ul style="margin-top: 3px; padding-left: 20px">
          <li v-for="item in demos">
            <router-link
              class="link"
              :key="item.name"
              :to="item.name"
              style="margin-left: 0; text-decoration: none"
            >
              {{ item.meta?.title || item.name }}
            </router-link>
          </li>
        </ul>
      </div>
      <div style="width: 80%; overflow: auto">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { demos } from "../router";
</script>

<style scoped>
.link {
  margin-left: 20px;
}

.link-container {
  margin-bottom: 20px;
}
</style>
